<template>
	<el-form :inline="true" class="form" size="mini">
		<el-form-item label="年份">
			<el-select v-model="filtrateForm.pypYear" placeholder="请选择" @change="changeYear">
				<el-option
					v-for="item in yearOptions"
					:key="item"
					:label="item"
					:value="item"
				/>
			</el-select>
		</el-form-item>
		<el-form-item label="考试周期">
			<el-select v-model="filtrateForm.pypId" placeholder="请选择" @change="changePypId">
				<el-option
					v-for="item in periodOptions"
					:key="item.pypId"
					:label="item.pypseqName"
					:value="item.pypId"
				/>
			</el-select>
		</el-form-item>
		<el-form-item label="模块类型">
			<el-select v-model="filtrateForm.moduleType" placeholder="请选择" @change="changeYearModuleType">
				<el-option
					v-for="item in moduleTypeOptions"
					:key="item.modulType"
					:label="item.moduleTypeName"
					:value="item.modulType"
				/>
			</el-select>
		</el-form-item>
		<el-form-item label="模块">
			<el-select
				v-model="filtrateForm.moduleId"
				placeholder="请选择"
				:filterable="true"
				@change="changeYearModule"
			>
				<i slot="prefix" class="el-input__icon el-icon-search" />
				<el-option
					v-for="item in moduleOptions"
					:key="item.value"
					:label="item.label"
					:value="item.value"
				/>
			</el-select>
		</el-form-item>
	</el-form>
</template>

<script>
	import bdApi from "@rc/apis/bd/index.mjs";
	import ccApi from "@rc/apis/cc/index.mjs";

	export default {
		props: {
			// 项目id
			projectId: {
				type: String,
				default: ""
			}
		},
		data() {
			return {
				filtrateForm: {
					pypYear: "", // 年份
					pypId: "", // 年份周期标识
					moduleType: "", // 模块类型
					moduleId: "" // 模块id
				}, // 列表检索表单项
				yearPeriodList: [], // 年份周期列表
				yearOptions: [], // 年份下拉列表
				periodOptions: [], // 周期下拉列表
				moduleTypeOptions: [], // 类型下拉列表
				moduleOptions: [] // 模块下拉列表
			};
		},
		watch: {
			projectId: {
				async handler(val) {
					if (val) {
						await this.updateModuleTypeOptions();
						this.filtrateForm.moduleType = this.moduleTypeOptions[0].modulType;
						this.updateYearPeriodList();
					}
				},
				immediate: true
			},
			filtrateForm: {
				handler(val) {
					this.$emit("change", val);
				},
				immediate: true,
				deep: true
			}
		},
		methods: {
			// 修改年份事件
			async changeYear() {
				this.periodOptions = this.yearPeriodList
					.filter((i) => i.pypYear === this.filtrateForm.pypYear)
					.sort((a, b) => a.pypSeq - b.pypSeq);
				// 默认选择第一个周期
				this.filtrateForm.pypId = this.periodOptions[0].pypId;
				await this.updateModuleTypeOptions();
				this.updateModuleOptions();
			},
			// 修改周期事件
			async changePypId() {
				await this.updateModuleTypeOptions();
				this.updateModuleOptions();
			},
			// 修改模块类型事件
			changeYearModuleType() {
				// 年份不存在，不执行检索
				if (!this.filtrateForm.pypYear || !this.filtrateForm.pypId) {
					return;
				}
				this.updateModuleOptions();
			},
			// 修改模块事件
			changeYearModule() {
				this.$emit("submit", this.filtrateForm);
			},
			// 更新年份周期列表
			updateYearPeriodList() {
				this.$emit("load-start");
				bdApi.queryYearPeriodList({
					data: {
						pypAvlstatus: "Y",
						projectId: this.projectId
					},
					success: ({ data }) => {
						this.yearPeriodList = data || [];
						const yearArr = this.yearPeriodList.map((i) => i.pypYear).sort((a, b) => b - a);
						this.yearOptions = Array.from(new Set(yearArr));
						if (this.yearPeriodList.length) {
							// 有值默认选中第一个
							this.filtrateForm.pypYear = this.yearOptions[0];
							this.periodOptions = this.yearPeriodList
								.filter((i) => i.pypYear === this.filtrateForm.pypYear)
								.sort((a, b) => a.pypSeq - b.pypSeq);
							this.filtrateForm.pypId = this.periodOptions[0].pypId;
							this.updateModuleOptions();
						} else {
							// 没数据清空之前选中的内容
							this.filtrateForm.pypYear = "";
							this.filtrateForm.pypId = "";
							this.filtrateForm.moduleId = "";
							this.periodOptions = [];
							this.moduleOptions = [];
							this.$emit("submit", this.filtrateForm);
						}
					}
				});
			},
			// 更新模块类型下拉列表
			updateModuleTypeOptions() {
				this.$emit("load-start");
				return new Promise((rs) => {
					// 此接口是固定数据，加载一次就够了
					if (this.moduleTypeOptions.length) {
						rs();
						return;
					}
					ccApi.queryModuleTypeList({
						success: (data) => {
							this.moduleTypeOptions = data || [];
							// 默认选中第一个
							this.filtrateForm.moduleType = this.moduleTypeOptions.length ? this.moduleTypeOptions[0].modulType : "";
							rs();
						}
					});
				});
			},
			// 更新模块下拉列表
			updateModuleOptions() {
				this.$emit("load-start");
				ccApi.queryModuleSelectList({
					data: {
						teachMethod: "A",
						projectId: this.projectId,
						pypId: this.filtrateForm.pypId,
						modulType: this.filtrateForm.moduleType
					},
					success: (data) => {
						this.moduleOptions = (data || []).map((i) => ({
							value: i.modulId,
							label: i.modulName
						}));
						// 首次模块列表加载完成，如果列表不为空则默认选中第一个
						this.filtrateForm.moduleId = this.moduleOptions.length ? this.moduleOptions[0].value : "";
						this.$emit("submit", this.filtrateForm);
					}
				});
			}
		}
	};
</script>


<style lang="less" scoped>
	.form {
		padding: 10px 0;

		/deep/ .el-form-item {
			margin-bottom: 5px;
			margin-right: 7px;
		}
	}
</style>
